import { useState } from "react";
import thingTypes from "./data";
import type { ThingType } from "./types";
import { Tree } from "./tree";
import { ThingTypeForm } from "./form";

export default function ThingTypePage() {
	const [selected, setSelected] = useState<ThingType | null>(null)
	const [data] = useState(thingTypes)
	return (
		<div style={{ display: 'flex', gap: 2 }}>
			<ThingTypesTree data={data} onSelected={setSelected} />
			{selected && (
				<ThingTypeForm
					value={selected}
					className="p-4"
				/>
			)}
		</div>
	)
}

function ThingTypesTree({ data, onSelected }: { data: ThingType[], onSelected?: (v: ThingType) => void }) {
	return (
		<Tree
			data={data}
			getId={v => v.id}
			getTitle={v => v.name}
			getParentId={v => v.parentTypeId}
			onSelected={onSelected}
			className="ml-2 p-4 rounded-2xl shadow-md w-50"
		/>
	)
}
